<template>
  <nav id="index-navbar" class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">

      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <!-- <a class="navbar-brand" href="#">Brand</a> -->
        <a class="navbar-brand" href="" @click="forward('home')" data-toggle="tab">
          <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
        </a>
        <p class="navbar-text"><strong>AshCraft 百货奇货</strong></p>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

        <!-- 分页导航条 Nav tabs -->
        <ul id="nav-tabs" class="nav navbar-nav" role="tablist">

          <li role="presentation" class="active">
            <a id="tab-controller-home" href="" @click="forward('home')" data-toggle="tab">618专场</a>
          </li>
          <li role="presentation">
            <a id="tab-controller-goods-all" href="">夏季特卖</a>
          </li>
          <li role="presentation" class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多特惠 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li class="disabled"><a href="" onclick="return false">美妆个护</a></li>
              <li class="disabled"><a href="" onclick="return false">书籍书刊</a></li>
              <li class="disabled"><a href="" onclick="return false">数码媒体</a></li>
              <li role="separator" class="divider"></li>
              <li role="presentation"><a href="" @click="forward('lottery')" role="tab" data-toggle="tab">红包大放送</a></li>
              <li role="separator" class="divider"></li>
              <li class="disabled"><a href="" onclick="return false">成为商家</a></li>
            </ul>
          </li>

          <!-- 搜索部分 -->
          <div class="navbar-form navbar-left">
            <div class="form-group">
              <input id="input-search" type="text" class="form-control" placeholder="Search" data-toggle="tooltip" data-placement="bottom" v-model='search.keyword'>
            </div>
            <button id="btn-search" type="submit" class="btn btn-default" data-loading-text="搜索中..." @click="searchCommodities">
              <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
              搜索
            </button>
          </div>
          <!-- 搜索部分 End -->

          <!-- 购物车部分 -->
          <li id="user-cart" role="presentation"><a id="tab-controller-cart" href="" @click="forward('cart')" data-toggle="tab">
            <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
            我的购物车
          </a></li>
          <!-- 购物车部分 End -->

          <!-- 用户信息 - 头像 部分 -->
          <li id="user-info" role="presentation" class="navbar-right dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
              <div>
                <img id="user-avatar" src="../assets/avatar.png" width="32px">
              </div>
            </a>
            <ul class="dropdown-menu">
              <li role="presentation"><a id="tab-controller-info" href="" @click="forward('info')" aria-controls="tab-user" role="tab" data-toggle="tab">
                <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                我的信息
              </a></li>
              <li role="presentation"><a id="tab-controller-order" href="" @click="forward('order')" aria-controls="tab-purchase" role="tab" data-toggle="tab">
                <span class="glyphicon glyphicon-time" aria-hidden="true"></span>
                我的订单
              </a></li>
              <li role="separator" class="divider"></li>
              <li><a href="" @click="logout" data-toggle="tab">
                <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>
                退出
              </a></li>
            </ul>
          </li>
          <!-- 用户信息 - 头像 部分 End -->


          <!-- 隐藏部分 -->
          <li role="presentation" style="display: none;">
            <a id="tab-controller-searching" href="" data-toggle="tab">搜索中</a>
            <a id="tab-controller-searching-all" href="" data-toggle="tab">搜索中</a>
            <a id="tab-controller-search" href="" data-toggle="tab">搜索</a>
            <a id="tab-controller-search-all" href="" data-toggle="tab">搜索</a>
            <a id="tab-controller-login" href="" data-toggle="tab">登录</a>
            <a id="tab-controller-register" href="" data-toggle="tab">注册</a>
          </li>

        </ul>
      </div><!-- /.navbar-collapse -->

    </div>
  </nav>
</template>

<script>
import {removeCookie} from "../common/cookie";

export default {
  name: "NavigationBar",
  data: function () {
    return {
      search: {
        keyword: ''
      }
    }
  },
  methods: {
    searchCommodities: function () {
      this.$router.replace({
        path: '/searching/' + (this.search.keyword.length > 0 ? this.search.keyword : ''),
        // replace: true
      })
    },
    logout: function () {
      removeCookie('phone')
      removeCookie('password')
      this.$store.state.user = null;
      this.$router.push({ name:'login' });
    },
    forward: function (name) {
      if (this.$router.currentRoute.name === name) return
      this.$router.push({ name: name })
    }
  },
  mounted() {
    console.log('[NavigationBar] mounted...')
    // 根据当前 router 位置激活对应 tab 样式
    $('#tab-controller-' + this.$router.currentRoute.name).tab('show')
  }
}
</script>

<style scoped>
#user-info div {
  height: 20px;
}
.left span, .right span{
  opacity: 0;
}
.left:hover span, .right:hover span{
  opacity: 1;
}
#user-cart{
  position: absolute;
  right: 67px;
}
#user-info{
  position: absolute;
  right: 20px;
}
#user-avatar {
  margin-top: -5px;
  border-radius: 16px;
}
</style>
